<!-- 
    更换尺寸大小
emit
cheageFont  自定义事件名
    子传父
 -->
 <template>
    <el-dropdown @command="chegeSize" trigger="click">
        <span class="el-dropdown-link">
            <el-icon title="尺寸大小">
                <i style="font-size:22px;font-weight: 400;" :class="'iconfont '+ 'icon-zitidaxiao'"></i>
            </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="large" :icon="CaretRight" :disabled="fontSize == 'large'">{{$t('size.large')}}</el-dropdown-item>
            <el-dropdown-item command="default" :icon="CaretRight" :disabled="fontSize == 'default'">{{$t('size.default')}}</el-dropdown-item>
            <el-dropdown-item command="small" :icon="CaretRight" :disabled="fontSize == 'small'">{{$t('size.small')}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
 </template>

 <script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue'
import { ref } from "vue"
import { ElMessage } from 'element-plus'
let fontSize = ref('default')
// 子传父，运用非TS语法，使用js的语法来写，目前很稳定
let emit = defineEmits<{(e : "cheageFont" , size : string):void}>()
fontSize.value = localStorage.getItem('sizeType') as string || "default"
const chegeSize = (typeSize : string)=>{
    // 响应式
    fontSize.value = typeSize
    // 存储到本地
    localStorage.setItem("sizeType",typeSize)
    // 进行传递参数
    emit("cheageFont" , fontSize.value)
    ElMessage.success("更改尺寸成功");
}

 </script>

 <style lang="less" scoped>
    .el-icon{
        vertical-align: -7px;
        cursor: pointer;
    }
 </style>